﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools Documentation - Fx/Fx.SmoothScroll</title>
</head>

<body>
  <div class="doc">
    <div class="methods">
			<h4 class="menu-item"><a href="#Fx-SmoothScroll">Fx.SmoothScroll</a></h4>
			<div class="menu-item"><a href="#"></a></div>
    </div>
    <div class="l-border r-border span-15 content">
				<h1 id="Fx-SmoothScroll"><a href="#Fx-SmoothScroll">Class: Fx.SmoothScroll</a></h1>

<p class="description">Auto targets all the anchors in a page and display a smooth scrolling effect upon clicking them.</p>

<h3>Note</h3>

<ul>
<li>
<em>Fx.SmoothScroll</em> requires the page to be in <a href="http://hsivonen.iki.fi/doctype/">Standards Mode</a>.</li>
</ul>
<h3>Extends</h3>

<p><a href="Fx.Scroll.html">Fx.Scroll</a></p>

<h2><a href="#">Fx.SmoothScroll Method: constructor</a></h2>

<h3 class="description">Syntax</h3>

<pre class="javascript"><span class="kw2">var</span> mySmoothScroll = <span class="kw2">new</span> Fx.<span class="me1">SmoothScroll</span><span class="br0">(</span><span class="br0">[</span>options<span class="br0">[</span>, win<span class="br0">]</span><span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments</h3>

<ol>
<li>options - (<em>object</em>, optional) In addition to all the <a href="Fx.Scroll.html">Fx.Scroll</a> options, <em>Fx.SmoothScroll</em> has links option incase you had a predefined links collection.</li>
<li>win     - (<em>object</em>, optional) The context of the <em>Fx.SmoothScroll</em>.</li>
</ol>
<h3>Options</h3>

<ul>
<li>links - (<em>mixed</em>) A collection of Elements or a string <selector> of Elements that the <em>Fx.SmoothScroll</em> can use.</selector>
</li>
<li>axes - (<em>array</em> or <em>string</em>, defaults to <code>['x', 'y']</code>) Specify which axis to scroll on, can be 'x', 'y', or ['x', 'y'].</li>
</ul>
<h3>Events</h3>

<ul>
<li>scrolledTo - (<em>function</em>) callback executed when an element is scrolled to (after the scrolling). Passed the link clicked and the element scrolled to as arguments.</li>
</ul>
<h3>Returns</h3>

<ul>
<li>(<em>object</em>) A new <em>Fx.SmoothScroll</em> instance.</li>
</ul>
<h3>Examples</h3>

<pre class="javascript"><span class="kw2">var</span> mySmoothScroll = <span class="kw2">new</span> Fx.<span class="me1">SmoothScroll</span><span class="br0">(</span><span class="br0">{</span>
    links: <span class="st0">'.smoothAnchors'</span>,
    wheelStops: <span class="kw2">false</span>
<span class="br0">}</span><span class="br0">)</span>;
</pre>

<h3>See Also</h3>

<ul>
<li><a href="Fx.Scroll.html">Fx.Scroll</a></li>
</ul>
    </div>
  </div>
<script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
